<!DOCTYPE html>
<html lang="en">

	<head>
		<meta http-equiv="content-type" content="text/html; charset=UTF-8">
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
		<meta name="description" content="">
		<meta name="author" content="">
		<!-- STYLESHEETS -->
		<!--[if lt IE 9]><script src="../../js/flot/excanvas.min.js"></script><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script><![endif]-->
		<link rel="stylesheet" type="text/css" href="../../css/cloud-admin.css">
		<link rel="stylesheet" type="text/css" href="../../css/themes/default.css" id="skin-switcher">
		<link rel="stylesheet" type="text/css" href="../../css/responsive.css">

		<link href="../../font-awesome/css/font-awesome.min.css" rel="stylesheet">
		<!-- file-input -->
		<link rel="stylesheet" type="text/css" href="../../js/file-input/fileinput.css" />
		<!-- SELECT2 -->
		<link rel="stylesheet" type="text/css" href="../../js/select2/select2.min.css" />
		<!-- UNIFORM -->
		<link rel="stylesheet" type="text/css" href="../../js/uniform/css/uniform.default.min.css" />
		<!-- datatable -->
		<link rel="stylesheet" href="../../js/datatables/datatable.css">
		<!-- WIZARD -->
		<link rel="stylesheet" type="text/css" href="../../js/bootstrap-wizard/wizard.css" />
		  <link rel="stylesheet" href="../../js/datepicker/datepicker.css">
		<!-- FONTS 
	<link href='http://fonts.useso.com/css?family=Open+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
-->
		<!-- JQUERY -->
		<script src="../../js/jquery/jquery-2.0.3.min.js"></script>
		<script src="../../js/common.js"></script>
	</head>

	<body>
		<header class="navbar clearfix" id="header">
		</header>

		<!-- PAGE -->
		<section id="page">
			<!-- SIDEBAR -->
			<div id="sidebar" class="sidebar">
				<div class="sidebar-menu nav-collapse">

					<!-- SIDEBAR MENU -->
					<ul>
						
					</ul>
					<!-- /SIDEBAR MENU -->
				</div>

			</div>
			<!-- /SIDEBAR -->
			<div id="main-content">

				<div class="container">
					<div class="row">
						<div id="content" class="col-lg-12">
							<!-- PAGE HEADER-->
							<div class="row">
								<div class="col-sm-12">
									<div class="page-header">
										<!-- STYLER -->

										<!-- /STYLER -->
										<!-- BREADCRUMBS -->
										<ul class="breadcrumb">
											<li>
												<i class="fa fa-home"></i>
												<a href="index.html">首页</a>
											</li>
											<li>
												<a href="#">商品管理</a>
											</li>
											<li>维护商品</li>
										</ul>
										<!-- /BREADCRUMBS -->

									</div>
								</div>
							</div>
							<!-- /PAGE HEADER -->
							<!-- SAMPLE -->
							<form id="form_pack">
							<div class="row col-md-12">
									<div class="box border primary" style="margin-left: 20px;">
											<div class="box-title">
												<h4><i class="fa fa-bars"></i>秒杀设置</h4>
											</div>
											<div class="box-body big" style="padding:10px;height:700px">
										<div class="form-group mrg-bt10-right" style="margin-top:10px;">
											<label class="control-label col-md-3"><span class="required">*</span>秒杀名称：</label>
											<div class="col-md-5 inline">
												<input type="text" class="form-control" name="secondName" placeholder="请输入秒杀活动名称" maxlength="50" />
												<input type="hidden" name="id" />
												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right" id="rangDate">
											<label class="control-label col-md-3"><span class="required">*</span>生效日期：</label>
											<div class="col-md-6 inline" style="display:inline-flex">
												<input class="Wdate" style="height:34px" type="text" id="d4311" name="startTime" onfocus="WdatePicker({maxDate:'#F{$dp.$D(\'d4312\')||\'2030-10-01\'}',dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,readOnly:true})"> -
												<input class="Wdate" type="text" style="height:34px" id="d4312" name="endTime" onfocus="WdatePicker({minDate:'#F{$dp.$D(\'d4311\')}',maxDate:'2030-10-01',dateFmt:'yyyy-MM-dd HH:mm:ss',isShowClear:false,readOnly:true})">
												<span class="error-span"></span>
											</div>
										</div>
										<div class="form-group mrg-bt10-right">
											<label class="control-label col-md-3">使用说明：</label>
											<div class="col-md-8 inline">
												<textarea name="remark" class="form-control" style="width:380px;resize:none;height:34px" ></textarea>
												<span class="error-span"></span>
											</div>
										</div>
				
										<div class="form-group mrg-bt10-right product_list" style="margin-top:10px">
											<label class="control-label col-md-3"><span class="required">*</span>适用商品：</label>
											<div class="col-md-8 inline" style="padding-left: 0px;">
											<div class="col-sm-4">
													  <input type="text" class="form-control" name="q" placeholder="输入商品关键字">
													</div>
													<label class="col-sm-1 control-label" style="width: auto">商品款式：</label>
													<div class="col-sm-4">
													<select id="group_select" class="col-md-12 select2-offscreen" tabindex="-1">
															
													</select>		
													</div>													
													<div class="col-sm-1">
									       				<a class="btn btn-primary search">查询</a>
													</div>
											</div>
										</div>
											 
										<div class="col-md-6 product_list">
								<div class="box border red">
									<div class="box-title" style="height: 34px">
									<h6 style="margin-top: 4px;">商品数据</h6>
									</div>
									<div class="box-body" style="max-height: 450px;overflow: auto;">
									<table id="td_product" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
										<thead>
										<tr>
										<th width="80%">商品名称</th>					
										<th class="productSalePrice hide">销售价</th>			
										<th class="vipPrice hide">女王价</th>								
										<th width="20%">操作</th>										
										<th class="productId hide">商品id</th>		
										</tr>
										</thead>
										<tbody>	
										<tr class="empty"><td colspan=3>请输入条件查询商品</td></tr>									
										</tbody>				
													
									</table>	
									</div>
							     </div>
								 </div>	
								 
								 	<div class="col-md-6 product_list">
								<div class="box border orange">
									<div class="box-title" style="height: 34px">
									<h6 style="margin-top: 4px;">已选择商品</h6>
									</div>
									<div class="box-body" style="max-height: 450px;overflow: auto;">
									<table id="td_selectproduct" cellpadding="0" cellspacing="0" border="0" class="datatable table table-striped table-bordered table-hover">
										<thead>
										<tr>
										<th width="60%">商品名称</th>
										<th width="10%">销售价</th>
										<th width="10%">女王价</th>
										<th width="15%">秒杀价</th>
										<th width="20%">操作</th>
										<th class="productId hide">商品id</th>
										</tr>
										</thead>
										<tbody>
										<tr class="empty"><td colspan=5>请从左侧添加商品</td></tr>		
										</tbody>		
													
									</table>	
									</div>
							     </div>
								 </div>
								 
											</div>
										</div>
										</div>
										</form>
										<div class="row" style="height: 30px;">
								<div class="col-md-12" style="text-align: center;">
									<div class="box ">
										<a href="#"  class="btn btn-success config bt-submit" style="width: 100px">
											保存
										</a>
									</div>
								</div>
					           </div>	
									</div>
								</div>
										
							
							<!-- /SAMPLE -->

							<div class="footer-tools">
								<span class="go-top">
								<i class="fa fa-chevron-up"></i> Top
							</span>
							</div>
						</div>
						<!-- /CONTENT-->
					</div>
				</div>
			</div>
		</section>
		<!--/PAGE -->
		<!-- JAVASCRIPTS -->
		<!-- Placed at the end of the document so the pages load faster -->

		<!-- BOOTSTRAP -->
		<script src="../../bootstrap-dist/js/bootstrap.min.js"></script>

		<!-- BLOCK UI -->
		<script type="text/javascript" src="../../js/jQuery-BlockUI/jquery.blockUI.min.js"></script>
		<!--bootbox-->
		<script type="text/javascript" src="../../js/bootbox/bootbox.min.js"></script>
		<!-- AUTOSIZE -->
		<script type="text/javascript" src="../../js/autosize/jquery.autosize.min.js"></script>
		<!-- spinner -->
		<script src="../../js/spinner/spin.js"></script>
		<!-- INPUT MASK -->
		
		<script type="text/javascript" src="../../js/bootstrap-inputmask/bootstrap-inputmask.min.js"></script>
			<!-- UNIFORM -->
	<script type="text/javascript" src="../../js/uniform/jquery.uniform.min.js"></script>
		<!-- DATA TABLES -->
		<script type="text/javascript" src="../../js/datatables/bootstrap-select.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-bootstrap.js"></script>
		<script type="text/javascript" src="../../js/datatables/datatable-tabletools.js"></script>


		<!-- SELECT2 -->
		<script type="text/javascript" src="../../js/select2/select2.min.js"></script>
	
      
        <script language="javascript" type="text/javascript" src="../../js/My97DatePicker/WdatePicker.js"></script>
        <script src="../../js/jquery-validate/jquery.validate.min.js"></script>
		<!-- COOKIE -->
		<script type="text/javascript" src="../../js/jQuery-Cookie/jquery.cookie.min.js"></script>
		<!-- CUSTOM SCRIPT -->
		<script src="../../js/script.js"></script>

		<script src="../../js/Sortable.min.js"></script>
		<script>
			var AddProductSecond = function() {
			var wizform = $('#form_pack');
			var selectProducts=[];//参与活动的商品
			var id=null,flag;
			var $mainDataTable=null;
			var formValiInit=function(){
	            wizform.validate({
	                doNotHideMessage: true,
					errorClass: 'error-span',
	                errorElement: 'span',
	                rules: {                	 
	                	secondName:{
	                		required:true
	                	}
	                },
	                highlight: function (element) { 
	                    $(element)
	                        .closest('.form-group').removeClass('has-success').addClass('has-error'); 
	                },
	
	                unhighlight: function (element) { 
	                    $(element)
	                        .closest('.form-group').removeClass('has-error'); 
	                },	
	                success: function (label) {	                    
	                        label.addClass('valid') 
	                        .closest('.form-group').removeClass('has-error').addClass('has-success'); 
	                    
	                }
				 });
			};
			
			var saveProductSecond=function(){
				if (wizform.valid() == false)return false;			
	            var second={};
	               second.id=id;
	               second.secondName=$("input[name=secondName]").val();	           
	              
	               second.remark=$("[name=remark]").val();
	               // second.productIds=selectProducts.toString();	 
	               if(selectProducts.length==0)
	               {
		                  $.alert("请设置参与活动的商品");
		                  return false;
	               }
	               second.productList = getSelectProductList();
	              	               
	               $.blockUI();
	               var url= App.getContextPath() + "admin/productsecond/addProductSecond.do";
	               if(id!=null)
	                     url=App.getContextPath() + "admin/productsecond/updateProductSecond.do";
	               
	               $.ajax({
						type: "post",
						url: url,
						data:$.param({second:JSON.stringify(second),startTime:$("input[name=startTime]").val(),endTime:$("input[name=endTime]").val()}),
						async: true,
						success: function(result) {
							$.unblockUI();
							if(result.type === "error"){
								$.alert(result.content);
							}else{
							  location.href="productsecond.html";
							}
						}						
					});
			};
			var getSelectProductList = function() {
				var productArray = [];
				$("#td_selectproduct tbody tr").not(".empty").each(function(){
					var product = {};
					product.id = $(this).find(".productId").html();
                    product.productName = $(this).find(".productName").html();
					product.productSalePrice = $(this).find(".productSalePrice").html();
					product.vipPrice = $(this).find(".vipPrice").html();
					product.productSecondPrice = $(this).find("input[name=productSecondPrice]").val();
					productArray.push(product);
				});
				return productArray;
			};
			var searchProduct=function(){
	              var groupId=$("#group_select").val();	             
	              var url=App.getContextPath()+"admin/product/searchProductList.do?q="+$("input[name=q]").val();
	              if(groupId!=null&&groupId!=-1)
	                  url+="&groupId="+groupId;
	              $.ajax({
						type: "post",
						url: url,						
						async: true,
						success: function(result) {								
							if(result.data!=null)
							 $("#td_product tbody").empty();
							$.each(result.data,function(index,item){
								if($.inArray(item.id,selectProducts)==-1){
									var tr = $('<tr></tr>');
									tr.append('<td class="productName">'+item.productName+'</td>');
									tr.append('<td class="productSalePrice hide">'+item.productSalePrice.toFixed(2)+'</td>');
									tr.append('<td class="vipPrice hide">'+item.vipPrice.toFixed(2)+'</td>');
									tr.append('<td><a class="btn btn-warning btn-xs bt-join btn-width"  pstatus="join"><i class="fa fa-plus-square-o" style="margin-right:5px"></i>参与活动</a></td>');
									tr.append('<td class="productId hide">'+item.id+'</td>');
									$("#td_product tbody").append(tr);
								}
							})
							
						}						
					});
	         };
	         var getProductSecondList=function(){
	        	 var groupId=$("#group_select").val(); 	           
	        	 url=App.getContextPath()+"admin/productsecond/getProductListById.do?productName="+$("input[name=q]").val()+"&secondId="+id;
              if(groupId!=null&&groupId!=-1)
                  url+="&groupId="+groupId;
              $.ajax({
					type: "post",
					url: url,
					async: true,
					success: function(result) {	
						if(result.data!=null)
						$("#td_selectproduct tbody").empty();
						$.each(result.data,function(index,item){
							if($.inArray(item.id,selectProducts)==-1)
					         selectProducts.push(item.id);
							var tr = $('<tr></tr>');
							tr.append('<td class="productName">'+item.productName+'</td>');
				        	tr.append("<td class='productSalePrice'>"+item.productSalePrice.toFixed(2)+"</td>");
				        	tr.append("<td class='vipPrice'>"+item.vipPrice.toFixed(2)+"</td>");
			        	   	tr.append("<td><input type='text' name='productSecondPrice' class='form-control' value='"+item.productSecondPrice.toFixed(2)+"' style='width: 80px;' /></td>");
			        	   	tr.append("<td><a class='btn btn-danger btn-xs bt-join btn-width'  pstatus='nojoin'><i class='fa fa-trash-o' style='margin-right:5px'></i>取消参与</a></td>");
			        	   	tr.append("<td class='productId hide'>"+item.id+"</td>");
							$("#td_selectproduct tbody").append(tr);
						})
					}						
				});
	         }
	         var groupChange=function(type){
					          App.getGroup();
					          $(".product_list").show();
					         
					           $(".search").click(searchProduct);
					           $(".product_list").off("click").on("click",".bt-join",function(){
					        	   var productName=$(this).closest("tr").find(".productName").html();
					        	   var productSalePrice = $(this).closest("tr").find(".productSalePrice").html();
					        	   var vipPrice = $(this).closest("tr").find(".vipPrice").html();
					        	   var productId=$(this).closest("tr").find(".productId").html();
							           if($(this).attr("pstatus")=="join"){
							        	   if( $("#td_selectproduct tbody").find(".empty").length==1)$("#td_selectproduct tbody").empty();
							        	   if($.inArray(productId,selectProducts)==-1)
										   {
							        	   //将当前行增加到已选择列表中	
							        	   var tr = $("<tr></tr>");
							        	   tr.append("<td class='productName'>"+productName+"</td>");
							        	   tr.append("<td class='productSalePrice'>"+productSalePrice+"</td>");
							        	   tr.append("<td class='vipPrice'>"+vipPrice+"</td>");
							        	   tr.append("<td><input type='text' name='productSecondPrice' class='form-control' value='"+productSalePrice+"' style='width: 80px;' /></td>");
							        	   tr.append("<td><a class='btn btn-danger btn-xs bt-join btn-width'  pstatus='nojoin'><i class='fa fa-trash-o' style='margin-right:5px'></i>取消参与</a></td>");
							        	   tr.append("<td class='productId hide'>"+productId+"</td>");
							        	   $("#td_selectproduct tbody").append(tr);							        	   
							               selectProducts.push(productId);
										   }							        	  
							               $(this).closest("tr").remove();
							               if($("#td_product tbody tr").length==0){
							            	   $("#td_product tbody").append("<tr class='empty'><td colspan=3>没有数据</td></tr>");
							               }
							           }else{
							        	   //将当前行增加到已选择列表中		
							        	   if( $("#td_product tbody").find(".empty").length==1)$("#td_product tbody").empty();
							        	   var tr = $("<tr></tr>");
							        	   tr.append("<td class='productName'>"+productName+"</td>");
							        	   tr.append("<td class='productSalePrice hide'>"+productSalePrice+"</td>");
							        	   tr.append("<td class='vipPrice hide'>"+vipPrice+"</td>");
							        	   tr.append("<td><a class='btn btn-warning btn-xs bt-join btn-width'  pstatus='join'><i class='fa fa-plus-square-o' style='margin-right:5px'></i>参与活动</a></td>");
							        	   tr.append("<td class='productId hide'>"+productId+"</td>");
							        	   $("#td_product tbody").append(tr);	
							        	    selectProducts.remove(productId,selectProducts);
											$(this).closest("tr").remove();	
											 if($("#td_selectproduct tbody tr").length==0){
								            	   $("#td_selectproduct tbody").append("<tr class='empty'><td colspan=5>请从左侧选择数据</td></tr>");
								               }
							                }					               
					           
					           });
					     	   
	              };
	              
	         //获取活动详情
	         var getProductSecond=function(id){
	           $.ajax({
						type: "post",
						url: App.getContextPath() + "admin/productsecond/getProductSecond.do",
						data:{id:id},
						async: true,
						success: function(result) {
						    $("[name=secondName]").val(result.secondName);		    
						 
						    $("[name=remark]").text(result.remark);						   
						
						    $("[name=startTime]").val(new Date(parseInt(result.startTime)).format("yyyy-MM-dd hh:mm:ss"));
						    $("[name=endTime]").val(new Date(parseInt(result.endTime)).format("yyyy-MM-dd hh:mm:ss"));
							groupChange();
							
							
					    }             					
					});
	         };
	       
			
				return {
					init: function() {
					    App.init();
					    formValiInit();	 
					    groupChange();
					 	var date=new Date();
					 	$("[name=startTime]").val(date.format("yyyy-MM-dd hh:mm:ss"));
					 	$("[name=endTime]").val(date.format("yyyy-MM-dd hh:mm:ss"));
					 	
						$(".bt-submit").click(saveProductSecond);
						flag=$.getUrlParam("flag");
						id=$.getUrlParam("id");
						if(id!=null){getProductSecond(id);getProductSecondList(id);}
						
					}
				}
			}();
			$(function() {
				$("#header").load("../head.html");
				AddProductSecond.init();
			});
		</script>

		<!-- /JAVASCRIPTS -->
	</body>

</html>